/* 
 *	Lightbox v2 Project page styles	
 *	Author: Lokesh Dhakar http://www.lokeshdhakar.com
 *	Created: a long time ago (2006 I think)
 *	Table of Contents:
 *		layout
 *		typography
 *    content

@import "compass/reset"
@import "compass/css3"
@import "compass/utilities/general/clearfix"

@import "variables"

/* layout
 *-----------------------------------------------
#sidebar
  position: fixed
  top: $gutter
  left: $gutter
  width: $sidebarWidth

#content
  margin: 0 $gutter $gutter $sidebarWidth+$gutter*2

.row
  +pie-clearfix

/* Typography
 *-----------------------------------------------

body
  background: $bodyBg url(../images/bg-checker.png)

body, input, textarea
  color: $color
  text-shadow: 0 -1px 0 rgba(0,0,0,1)
  font-size: $fontSize
  line-height: $lineHeight
  font-family: $fontFamily
  font-weight: 600
  -webkit-font-smoothing: antialiased

#lightbox
  text-shadow: none

h1,h2,h3,h4,h5,h6
  font-family: $headingFontFamily
  font-weight: 400
  letter-spacing: 0.03em
  line-height: $lineHeight
  margin: 0
  color: $headingColor

h1
  font-size: $fontSize + 24
  line-height: 1.2em

h2
  font-size: $fontSize + 18
  line-height: 1.45em
  margin-bottom: 0.2em

h3
  font-size: $fontSize
  text-transform: uppercase
  letter-spacing: 0.1em
  color: darken($headingColor, 30%)

h4
  font-size: $fontSize



/* Text elements
p
  margin: 0 0 1.25em 0
  line-height: $lineHeight  

ul, ol
  margin: 0 0 1.25em 0

dt
  font-weight: bold

dd
  margin-bottom: 1.625em

strong
  font-weight: bold

i
  font-style: italic

pre
  background: rgba(0,0,0,0.4)
  color: $orange
  font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  line-height: 1.5
  margin: $gutter/2 0 $gutter/2 0
  overflow: auto
  padding: 1em
  +border-radius($radius)
  +box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))

code, kbd
  font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  background: rgba(0,0,0,0.4)
  +box-shadow( 0 1px 0 0 rgba(255,255,255,0.1), inset 0 2px 6px 2px rgba(0,0,0,1))
  padding: 5px
  +border-radius($radius)  
  color: $orange

pre code
  font-size: 13px
  background: transparent
  +box-shadow(none)
  padding: 0

/* Links
a
  color: $linkColor
  text-decoration: none
  &:hover
    color: darken($linkColor, 20%)
    
::-moz-selection,
::selection
  background: $orange
  color: white

    
/* sidebar
 *-----------------------------------------------

#sidebar
  +opacity(0.6)
  +transition( opacity .2s)
  &:hover
    +opacity(1)
  a
    color: #fff
  .logo
    +transition( all .2s ease-out)
    em
      color: $linkColor
    &:hover
      text-shadow: 0 0 20px rgba(208, 235, 106,1), 0 0 50px rgba(208, 235, 106,1)
  .author
    font-weight: 800
    line-height: 1.4em
    a
      &:hover
        text-shadow: 0 0 10px rgba(255,255,255, 1)
    .twitter
      font-size: $fontSize - 2
      a
        color: #4d9ed8
      em
        color: #4d9ed8
        
#nav
  list-style: none
  margin: 1.5em 0 1em 0
  font-size: 14px
  text-transform: uppercase
  letter-spacing: 0.1em
  font-family: $headingFontFamily
  li
    padding: 0
    margin: 0
  a
    display: block
    height: 2.0em
    padding: 0.6em 0.2em 0.3em $gutter/2
    background: rgba(80,80,80,1)
    border-top: 1px solid rgba(255,255,255,0.15)
    border-bottom: 1px solid rgba(0,0,0,0.4)
    +transition( all .2s ease-out)
    &:hover
      text-shadow: 0 1px 0 rgba(0,0,0,0.6)
      background-color: darken($headingColor, 30%)
  a.first
    border-bottom-color: rgba(0,0,0,0.5)
    +border-top-radius($radius)
    border-top-color: transparent
  a.last
    border-top-color: rgba(255,255,255,0.25)
    +border-bottom-radius($radius)


/* content
 *-----------------------------------------------

.download
  float: left
  margin: 0 $gutter $gutter 0
  padding: 10px 20px 10px 10px
  background-color: #333
  border: 5px solid #333
  +border-radius($radius)
  +transition( all .2s ease-out)
  &:hover
    border-color: $linkColor
    background-color: #444
  .box
    float: left
  .file
    float: left
    font-size: 36px
    font-family: $headingFontFamily
    font-weight: 400
    color: white
    line-height: 1.1em
    .version
      font-size: 24px
      color: $linkColor
    

.filelist
  float: left
  font-size: 12px
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  line-height: 1.5em
  .header
    text-transform: uppercase
    font-weight: bold
  .folder
    color: #999
  .note
    color: #999


.changelog
  margin-bottom: 0.5em
  li
    list-style: none
    padding: 0 0 0 14px
    background: url(../images/bullet.gif) no-repeat 0 11px
    color: #999
    .version
      color: #88A616
    .date
      color: #fff
  .old
    display: none

.showOlderChanges
  color: #999


.forums
  float: left
  margin: 0 $gutter $gutter 0
  padding: 10px
  background-color: #333
  border: 5px solid #333
  +border-radius($radius)
  +transition( all .2s ease-out)
  &:hover
    border-color: $linkColor
    background-color: #444
  .speech
    float: left
    margin-right: 20px
  .link
    float: left
    font-size: 36px
    font-family: $headingFontFamily
    font-weight: 400
    color: white
    line-height: 1.1em
    .sub
      color: $linkColor

#elsewhere
  .button
    font-family: $headingFontFamily
    font-weight: normal
    font-size: 24px
    display: block
    float: left
    margin: $gutter/2 $gutter/2 $gutter 0
    padding: 10px 10px 10px 10px
    background-color: #333
    border: 5px solid #333
    +border-radius($radius)
    +transition( all .2s ease-out)
    color: #fff
    &:hover
      background-color: #444
      border-color: $linkColor

/* misc
 *-----------------------------------------------

p.lead
  font-size: $fontSize + 10
  font-weight: 700
  color: darken( $color, 10%)
  line-height: 1.4em
  margin-bottom: 0
  

hr
  height: 6px
  background: #3d3d33
  border: none
  +border-radius($radius)
  clear: both

.section
  padding: $gutter 0
  &:first-child
    border-top: none

.imageRow
  +pie-clearfix
  margin: $gutter/2 0 
  .single
    float: left
    a
      float: left
      display: block
      background: rgba(255,255,255,.1)
      padding: 7px
      line-height: 1em
      +border-radius($radius)
      +box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
      margin-right: $gutter
      +transition( all .2s ease-out)
      img
        +border-radius($radius)
        border: 1px solid rgba(0,0,0,0.3)
      &:hover
        background-color: $linkColor
  .set
    float: left
    background: rgba(255,255,255,.1)
    +border-radius($radius)
    +box-shadow( 0 1px 4px 0 rgba(0,0,0,0.5))
    +transition( all .2s ease-out)
    &:hover
      background: rgba(255,255,255,.2)
    .single
      a
        background: none
        +border-radius(0)
        +box-shadow(none)
        margin-right: 0
        &:hover
          background-color: $linkColor       
          +box-shadow( 0 -1px 0 0 rgba(255,255,255,0.2), 0 1px 4px 0 rgba(0,0,0,0.5))
    .single.first
      a
        +border-left-radius($radius)
    .single.last
      a
        +border-right-radius($radius)
       
// Drop comments below content
@media only screen and (max-width: 1000px)

  body, input, textarea
    font-size: $fontSize - 2

  body
    padding-top: 20px
    
  .section
    padding: 20px 0

  p.lead
    font-size: $fontSize + 4
    
  h1
    font-size: 30px

  h2
    font-size: 24px

  h3
    font-size: 16px
  
  code, kbd
    font-size: 13px

  pre code
    font-size: 12px
  
  pre
    padding: .75em
    
  #sidebar
    width: $sidebarWidth - 40
    left: 20px

  #content
    margin-left: $sidebarWidth+$gutter - 40


@media only screen and (max-width: 700px)
  body, input, textarea
    font-size: $fontSize - 4
    padding-top: 0

  p.lead
    font-size: $fontSize

  code, kbd
    font-size: 12px

  pre code
    font-size: 11px

  pre
    padding: .5em


  #sidebar
    +opacity(1)
    position: static
    text-align: center
    width: auto
    margin: 20px 20px 0 20px
    border-bottom: 6px solid #3d3d33
    h1
      font-size: 24px
    .twitter
      font-size: 14px
    #nav
      font-size: 12px
      li
        display: inline-block
        a
          padding: 10px
          height: auto
          margin: 0 5px 10px 5px
          +border-radius(6px)

  h2
    font-size: 18px

  h3
    font-size: 14px

  #content
    margin: 10px 20px 20px 20px

  .download
    text-align: center
    width: 95%
    margin-right: 0
    padding-right: 0
    padding-left: 0
    .box, .file
      float: none
      
  .forums
    text-align: center
    width: 95%
    margin-right: 0
    padding-right: 0
    padding-left: 0
    .speech, .link
      float: none
      


    